<template>
  <div class="page-container desktop">
    <transition name="fade">
      <div class="menu-bar desktop" v-if="navBar_acive">
        <div
          class="item panl-slogan"
          :class="active_num == 0 ? 'active-slo' : ''"
          @click="changeActive(0)"
        >
          <div class="hover-pictures p1"></div>
          <span class="title">智能生活</span>
        </div>
        <div
          class="item panl-Share"
          :class="active_num == 1 ? 'active-slo1' : ''"
          @click="changeActive(1)"
        >
          <div class="hover-pictures p2"></div>
          <span class="title">小米妙享</span>
        </div>
        <div
          class="item panl-smart"
          :class="active_num == 2 ? 'active-slo1' : ''"
          @click="changeActive(2)"
        >
          <div class="hover-pictures p3"></div>
          <span class="title">小米智能</span>
        </div>
        <div
          class="item panl-ecol"
          :class="active_num == 3 ? 'active-slo1' : ''"
          @click="changeActive(3)"
        >
          <div class="hover-pictures p4"></div>
          <span class="title">小爱同学</span>
        </div>
      </div>
    </transition>
    <div class="container desktop">
      <div data-v-64061bad="" class="back-img"></div>
      <Outer />
      <Video v-if="video_Show" />
      <!---->
    </div>
    <div>
      <Share />
    </div>
  </div>
</template>

<script>
// Share 为主组件页面
import Share from "@/components/Share";
import Video from "@/components/Video";
import Outer from "@/components/Outer";

import { mapState, mapMutations } from "vuex";
export default {
  name: "pagecontainer",
  components: {
    Share,
    Video,
    Outer,
  },
  data() {
    return {};
  },
  computed: {
    ...mapState(["navBar_acive", "video_Show", "active_num"]),
  },
  mounted() {
    // console.log(this.$store.state.navBar_acive);
    var that = this;
    var M_observer = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          console.log(entry.target.style = 'opacity: 1; transform: none;')
          entry.target.style = 'opacity: 1; transform: none;animation: moveTop 1s'

        }
      });
    });
    document.querySelectorAll('.content').forEach(function (ele) {
        M_observer.observe(ele);
    });
  },
  methods: {
    ...mapMutations(["changePage", "changeActive"])
  },
};
</script>

<style lang="less" scoped>
.page-container {
  min-height: 100vh;
  .menu-bar.desktop,
  .menu-bar.tablet,
  .menu-bar.tablet {
    display: flex;
    position: fixed;
    z-index: 5;
    top: 7vh;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: #fff;
    .item {
      cursor: pointer;
      position: relative;
      margin: 0;
      width: 25vw;
      min-width: 12.5rem;
      overflow: hidden;
      border-right: 1px solid #e5e5e5;
      border-top: 1px solid #e5e5e5;
      .title {
        position: absolute;
        color: #1b1b1b;
        font-size: 3.0625rem;
        width: 3.125rem;
        height: 14.5rem;
        font-weight: 100;
        top: 2.375rem;
        left: 2.5rem;
        left: 40px;
      }
    }
    .item.active-slo .hover-pictures {
      opacity: 1;
    }
    .item.active-slo .title {
      color: #fff;
    }
    .item.active-slo1 .hover-pictures {
      opacity: 1;
    }
    .item.active-slo1 .title {
      color: #000;
    }
    .item .p1 {
      left: -9.375rem;
    }
    .item .hover-pictures {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-repeat: no-repeat;
      background-size: cover;
      z-index: -1;
      transition: opacity 0.8s;
    }
    .item:hover .hover-pictures {
      opacity: 1;
    }
    .hover-pictures.p1 {
      background-image: url("../../assets/imgs/p1.png");
    }
    .hover-pictures.p2 {
      background-image: url("../../assets/imgs/p2.png");
    }
    .hover-pictures.p3 {
      background-image: url("../../assets/imgs/p3.png");
    }
    .hover-pictures.p4 {
      background-image: url("../../assets/imgs/p4.png");
    }

    // .hover-pictures.p3{
    //   background-image: url('../../assets/imgs/p1.png');
    // }
    // .hover-pictures.p4{
    //   background-image: url('../../assets/imgs/p1.png');
    // }
  }
  // .menu-bar.desktop .item .title,
  // .menu-bar.tablet .item .title,
  // .menu-bar.tablet .item .title {
  //   position: absolute;
  //   color: #1b1b1b;
  //   font-size: 3.0625rem;
  //   width: 3.125rem;
  //   height: 14.5rem;
  //   font-weight: 200;
  //   top: 2.375rem;
  //   left: 2.5rem;
  //   left: 40px;
  // }
  .menu-bar.mobile {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: 4;
    top: 7vh;
    background-color: #fefefe;
    .item {
      height: 23.25vh;
      font-size: 1.6875rem;
      position: relative;
      overflow: hidden;
    }
  }
}
.container {
  width: 100%;
  height: 40.625rem;
  min-height: 100vh;
  background-size: cover;
}
.container.desktop,
.container.wide {
  background-image: url(//cdn.cnbj1.fds.api.mi-img.com/miot-homepage/img/mi-page2.1d7018f.png);
}
.container.mobile,
.container.tablet {
  position: relative;
}
.container.mobile .back-img,
.container.tablet .back-img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  background-image: url(//cdn.cnbj1.fds.api.mi-img.com/miot-homepage/img/p1.c44784c.png);
}
</style>